<template>
  <view class="order-detail-container">
    <!-- 顶部状态栏 -->
    <view class="status-bar" :style="{backgroundColor: statusBgColor}">
      <text class="status-text">{{ orderStatusText }}</text>
      <text class="status-desc">{{ statusDesc }}</text>
    </view>
    
    <!-- 收货地址 -->
    <view class="address-section" @click="editAddress">
      <view class="address-icon">
        <uni-icons type="location-filled" size="24" color="#FF8C00"></uni-icons>
      </view>
      <view class="address-info">
        <view class="receiver">
          <text>{{ orderData.receiver }}</text>
          <text class="phone">{{ orderData.phone }}</text>
        </view>
        <view class="address">{{ orderData.address }}</view>
      </view>
      <view class="address-arrow">
        <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
      </view>
    </view>
    
    <!-- 商品列表 -->
    <view class="product-section">
      <view class="section-title">
        <text>商品信息</text>
      </view>
      <view class="product-list">
        <product-card 
          v-for="item in orderData.products" 
          :key="item.id"
          :product="item"
          mode="order"
          :show-checkbox="false"
        />
      </view>
    </view>
    
    <!-- 订单信息 -->
    <view class="order-info-section">
      <view class="section-title">
        <text>订单信息</text>
      </view>
      <view class="info-item">
        <text class="info-label">订单编号</text>
        <text class="info-value">{{ orderData.orderNo }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">下单时间</text>
        <text class="info-value">{{ orderData.createTime }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">支付方式</text>
        <text class="info-value">{{ orderData.paymentMethod }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">配送方式</text>
        <text class="info-value">{{ orderData.deliveryMethod }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">订单备注</text>
        <text class="info-value">{{ orderData.remark || '无' }}</text>
      </view>
    </view>
    
    <!-- 价格明细 -->
    <view class="price-section">
      <view class="price-item">
        <text>商品总价</text>
        <text>¥{{ orderData.totalPrice }}</text>
      </view>
      <view class="price-item">
        <text>运费</text>
        <text>¥{{ orderData.shippingFee }}</text>
      </view>
      <view class="price-item">
        <text>优惠券</text>
        <text>-¥{{ orderData.couponDiscount }}</text>
      </view>
      <view class="price-item total">
        <text>实付款</text>
        <text class="total-price">¥{{ orderData.actualPayment }}</text>
      </view>
    </view>
    
    <!-- 底部操作按钮 -->
    <view class="action-bar">
      <button 
        v-if="orderData.status === 1" 
        class="btn primary" 
        @click="payOrder"
      >立即支付</button>
      <button 
        v-if="orderData.status === 2" 
        class="btn" 
        @click="confirmReceipt"
      >确认收货</button>
      <button 
        v-if="[3,4].includes(orderData.status)" 
        class="btn" 
        @click="deleteOrder"
      >删除订单</button>
      <button 
        v-if="[1,2].includes(orderData.status)" 
        class="btn" 
        @click="cancelOrder"
      >取消订单</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import ProductCard from './components/ProductCard.vue'

// 订单数据
const orderData = ref({
  id: '',
  orderNo: '',
  status: 1, // 1待支付 2待发货 3待收货 4已完成 5已取消
  receiver: '张三',
  phone: '13800138000',
  address: '北京市朝阳区建国路88号现代城A座1001室',
  products: [
    {
      id: '1',
      name: '高品质纯棉T恤',
      price: 99.00,
      originalPrice: 129.00,
      image: '/static/product.jpg',
      count: 2,
      spec: '白色/L'
    },
    {
      id: '2',
      name: '休闲牛仔裤',
      price: 199.00,
      originalPrice: 259.00,
      image: '/static/product.jpg',
      count: 1,
      spec: '深蓝色/32'
    }
  ],
  totalPrice: 397.00,
  shippingFee: 10.00,
  couponDiscount: 20.00,
  actualPayment: 387.00,
  createTime: '2023-05-15 14:30:22',
  paymentMethod: '微信支付',
  deliveryMethod: '快递配送',
  remark: '请尽快发货，谢谢'
})

// 订单状态相关计算属性
const orderStatusText = computed(() => {
  const statusMap = {
    1: '待支付',
    2: '待发货',
    3: '待收货',
    4: '已完成',
    5: '已取消'
  }
  return statusMap[orderData.value.status] || ''
})

const statusDesc = computed(() => {
  const descMap = {
    1: '请尽快完成支付，订单将在30分钟后自动取消',
    2: '商家正在准备商品，请耐心等待',
    3: '商品已发货，请注意查收',
    4: '订单已完成，感谢您的购买',
    5: '订单已取消'
  }
  return descMap[orderData.value.status] || ''
})

const statusBgColor = computed(() => {
  const colorMap = {
    1: '#FF8C00',
    2: '$secondary-color',
    3: '$secondary-color',
    4: '#4CAF50',
    5: '#999999'
  }
  return colorMap[orderData.value.status] || '#FF8C00'
})

// 页面加载
onLoad((options) => {
  if (options.id) {
    // 实际项目中这里应该调用API获取订单详情
    // fetchOrderDetail(options.id)
    orderData.value.id = options.id
    orderData.value.orderNo = 'DD' + new Date().getTime()
  }
})

// 操作方法
const editAddress = () => {
  uni.navigateTo({
    url: '/pages/address/edit?id=' + orderData.value.id
  })
}

const payOrder = () => {
  uni.showLoading({ title: '正在支付...' })
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({ title: '支付成功', icon: 'success' })
    orderData.value.status = 2
  }, 1500)
}

const confirmReceipt = () => {
  uni.showModal({
    title: '确认收货',
    content: '请确认您已收到商品且商品无误',
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '处理中...' })
        setTimeout(() => {
          uni.hideLoading()
          uni.showToast({ title: '确认收货成功', icon: 'success' })
          orderData.value.status = 4
        }, 1000)
      }
    }
  })
}

const cancelOrder = () => {
  uni.showModal({
    title: '取消订单',
    content: '确定要取消此订单吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '处理中...' })
        setTimeout(() => {
          uni.hideLoading()
          uni.showToast({ title: '订单已取消', icon: 'success' })
          orderData.value.status = 5
        }, 1000)
      }
    }
  })
}

const deleteOrder = () => {
  uni.showModal({
    title: '删除订单',
    content: '确定要删除此订单吗？删除后不可恢复',
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '处理中...' })
        setTimeout(() => {
          uni.hideLoading()
          uni.showToast({ title: '订单已删除', icon: 'success' })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }, 1000)
      }
    }
  })
}
</script>

<style lang="scss" scoped>

.order-detail-container {
  padding-bottom: 120rpx;
  background-color: $light-bg;
  min-height: 100vh;
}

.status-bar {
  padding: 40rpx 30rpx;
  color: $text-color-inverse;
  
  .status-text {
    font-size: $font-size-32rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 10rpx;
  }
  
  .status-desc {
    font-size: $font-size-26rpx;
    opacity: 0.9;
  }
}

.address-section {
  display: flex;
  align-items: center;
  padding: 30rpx;
  margin: 20rpx;
  background-color: $white-bg;
  border-radius: 10rpx;
  
  .address-icon {
    margin-right: 20rpx;
  }
  
  .address-info {
    flex: 1;
    
    .receiver {
      font-size: $font-size-30rpx;
      margin-bottom: 10rpx;
      
      .phone {
        margin-left: 20rpx;
        color: $text-color-666;
      }
    }
    
    .address {
      font-size: $font-size-26rpx;
      color: $text-color-666;
      @include text-ellipsis(2);
    }
  }
  
  .address-arrow {
    margin-left: 20rpx;
  }
}

.section-title {
  padding: 20rpx 30rpx;
  font-size: $font-size-28rpx;
  color: $text-color-666;
  border-bottom: 1rpx solid #f5f5f5;
}

.product-section {
  margin: 20rpx;
  background-color: $white-bg;
  border-radius: 10rpx;
  
  .product-list {
    padding: 0 30rpx;
  }
}

.order-info-section {
  margin: 20rpx;
  background-color: $white-bg;
  border-radius: 10rpx;
  
  .info-item {
    display: flex;
    justify-content: space-between;
    padding: 25rpx 30rpx;
    font-size: $font-size-28rpx;
    
    .info-label {
      color: $text-color-666;
    }
    
    .info-value {
      color: $text-color;
    }
  }
}

.price-section {
  margin: 20rpx;
  padding: 0 30rpx;
  background-color: $white-bg;
  border-radius: 10rpx;
  
  .price-item {
    display: flex;
    justify-content: space-between;
    padding: 25rpx 0;
    font-size: $font-size-28rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    &.total {
      border-bottom: none;
      
      .total-price {
        color: $primary-color;
        font-weight: bold;
        font-size: $font-size-32rpx;
      }
    }
  }
}

.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  padding: 20rpx 30rpx;
  background-color: $white-bg;
  border-top: 1rpx solid #f5f5f5;
  
  .btn {
    margin-left: 20rpx;
    padding: 0 40rpx;
    height: 70rpx;
    line-height: 70rpx;
    font-size: $font-size-28rpx;
    border-radius: 35rpx;
    border: 1rpx solid #ddd;
    background-color: $white-bg;
    color: $text-color;
    width: 100%;
    &.primary {
      background-color: $primary-color;
      color: $text-color-inverse;
      border-color: $primary-color;
    }
  }
}
</style>